<template>
  <div class="login-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="账户">
        <el-input v-model="form.account"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.password" :type="inputType">
          <el-button slot="append" @click="changeInputType" :title="title">
            <svg v-show="inputType==='password'" class="icon" aria-hidden="true">
              <use xlink:href="#icon-show"></use>
            </svg>
            <svg v-show="inputType==='text'" class="icon" aria-hidden="true">
              <use xlink:href="#icon-hide"></use>
            </svg>
          </el-button>
        </el-input>
      </el-form-item>
      <el-form-item style="display: flex;justify-content: space-between;">
        <el-button type="primary" @click="onLogin"
                   :loading="loading">登录</el-button>
        <el-button type="info" @click="clearForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { login } from '@/api/userApi'
export default {
  name: 'index',
  components: {},
  props: {},
  data () {
    return {
      inputType: 'password',
      title: '显示',
      loading: false,
      form: {
        phone: '',
        account: '',
        password: ''
      }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    onLogin () {
      const user = {
        account: this.form.account,
        password: this.form.password
      }
      this.loading = true
      // 调用登录
      // eslint-disable-next-line no-undef
      login(user).then(res => {
        if (res.data.code === '000000') {
          this.$message.success('登录成功')
          localStorage.setItem('user', JSON.stringify(res.data.data))
        } else {
          this.$message.error('登录失败：' + res.data.msg)
        }
        this.loading = false
      }).catch(e => {
        this.$message.error('系统异常，请稍后再试')
        this.loading = false
      })
    },
    changeInputType () {
      if (this.inputType === 'password') {
        this.inputType = 'text'
        this.title = '隐藏'
      } else {
        this.inputType = 'password'
        this.title = '显示'
      }
    },
    clearForm () {
      this.form.account = ''
      this.form.password = ''
      this.inputType = 'password'
      this.title = '显示'
    }
  }
}
</script>

<style scoped>
.login-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
